<script setup lang="ts">
import { APP_CONFIG } from '~/config'

const carouselRef = ref()
const page = ref(1)
const menuOptions = inject('menu') as any[]

// 获取首页 分类id = menuOptions[0].id  新闻列表
const { data } = await useAsyncData('news', () => useApiFetch(`/app/articleCategory/pagearticle/${menuOptions[0].categoryId}?pageNum=${page.value}&pageSize=20`), {
  watch: [page],
})

// 获取通知公告
const { data: noticeData } = await useAsyncData('notice', () => useApiFetch(`/app/articleCategory/pagearticle/${APP_CONFIG.noticeCategoryId}?pageNum=${page.value}&pageSize=10`))

const noticeList = noticeData.value?.data?.rows || []

// 轮播新闻 获取 首页第一页的5条数据
const swipeList = data.value?.data?.rows.slice(0, 5) || []

// 项目列表
const { data: projectData } = await useAsyncData('project', () => useApiFetch(`/app/articleCategory/pagearticle/${APP_CONFIG.projectRecommendCategoryId}?pageNum=1&pageSize=10`))

// 合作单位
const { data: cooperationData } = await useAsyncData('cooperation', () => useApiFetch(`/app/articleCategory/pagearticle/${APP_CONFIG.cooperationCategoryId}?pageNum=1&pageSize=10`))

const cooperationList = cooperationData.value?.data?.rows ?? []

const projectList = projectData.value?.data?.rows ?? []

const newsList = computed(() => data.value?.data?.rows ?? [])

const total = computed(() => data.value?.data?.total ?? 0)

function prev() {
  carouselRef.value?.prev()
}

function next() {
  carouselRef.value?.next()
}

const openWindow = (url: string) => {
  window.open(url, '_blank')
}
</script>

<template>
  <main>
    <div class="banner-container" />
    <div class="w-[1200px] mx-auto">
      <!-- 通知 -->
      <div class="rounded-[4px] bg-[#e6e6e6] my-[30px] flex items-center">
        <n-button type="primary" class="mr-[15px]">
          <template #icon>
            <UnoIcon class="i-ph:chat-centered-text" />
          </template>
          通知公告
        </n-button>
        <n-carousel autoplay direction="vertical" :show-dots="false" :interval="3000" class="!h-[34px] cursor-pointer">
          <div v-for="item in noticeList" :key="item" class="leading-[34px] text-[#4c4c4c]">
            <NuxtLink target="_blank" :to="`/news/${item.id}?categoryId=${item.parentCategoryId}&currentCategoryId=${item.categoryId}`">
              {{ item.title }}
            </NuxtLink>
            <span class="ml-[10px] text-[#999] text-[12px]">{{ item.publishTime }}</span>
          </div>
        </n-carousel>
      </div>
      <!-- 新闻 -->
      <div class="flex mb-[30px]">
        <div class="swiper-container">
          <n-carousel autoplay :interval="3000" class="w-full h-full">
            <div v-for="item in swipeList" :key="item.id" class="relative w-full h-full">
              <NuxtLink target="_blank" :to="`/news/${item.id}?categoryId=${item.categoryId}&currentCategoryId=${item.categoryId}`">
                <img class="w-full h-full"
                  :src="item.urlList?.[0]?.url || 'http://jmrh.dumi.info/upload/202506/13/202506131539171221.png'" alt="">
                <div
                  class="absolute bottom-0 left-0 w-full h-[44px] leading-[44px] indent-4 bg-[rgba(0,0,0,0.5)] text-[#fff] text-[16px]">
                  {{ item.title }}
                </div>
              </NuxtLink>
            </div>
          </n-carousel>
        </div>
        <div class="flex-1 ml-[20px] flex flex-col">
          <div class="flex justify-between items-center">
            <BasicTitle class="ml-[18px]" title="新闻动态" title-en="NEWS" />
            <NuxtLink class="text-[12px]" target="_blank" :to="`/news?categoryId=1958040804718153729&childCategoryId=1958041135615184898`">
              更多>
            </NuxtLink>
          </div>
          <div class="mt-[10px] flex-1 flex flex-col">
            <div class="relative flex-1">
              <div class="overflow-auto absolute inset-0">
                <n-scrollbar>
                  <n-list hoverable :show-divider="false">
                    <n-list-item v-for="item in newsList" :key="item.id">
                      <NuxtLink target="_blank" :to="`/news/${item.id}?categoryId=${item.categoryId}&currentCategoryId=${item.categoryId}`">
                        <n-thing class="cursor-pointer" :title="item.title" :description="item.publishTime" />
                      </NuxtLink>
                    </n-list-item>
                  </n-list>
                </n-scrollbar>
              </div>
            </div>
            <div class="flex justify-end pt-[10px]">
              <n-pagination v-model:page="page" :page-size="20" :item-count="total" size="small" />
            </div>
          </div>
        </div>
      </div>
      <!-- 项目 -->
      <div class="mb-[30px]">
        <div class="flex justify-between items-center mb-[10px]">
          <BasicTitle title="项目推荐" title-en="Project Recommendation" />
          <NuxtLink class="text-[12px]" target="_blank"
            :to="`/news?categoryId=1958041522522951682&childCategoryId=${APP_CONFIG.projectRecommendCategoryId}`">
            更多></NuxtLink>
        </div>
        <div class="relative carousel">
          <n-carousel ref="carouselRef" :slides-per-view="4" :space-between="20" draggable :loop="false"
            :show-dots="false" :show-arrow="false">
            <div v-for="i in projectList" :key="i.id"
              class="w-[285px] h-[220px] rounded-[8px] overflow-hidden relative cursor-pointer">
              <NuxtLink target="_blank" :to="`/news/${i.id}?categoryId=${i.parentCategoryId}&currentCategoryId=${i.categoryId}`">
                <img class="w-full h-full"
                  :src="i.urlList?.[0]?.url || 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg'"
                  alt="">
                <div
                  class="absolute bottom-0 left-0 w-full h-[44px] leading-[44px] text-center indent-4 bg-[rgba(0,0,0,0.5)] text-[#fff] text-[16px]">
                  {{ i.title }}
                </div>
              </NuxtLink>
            </div>
          </n-carousel>
          <div class="custom-arrow custom-arrow--left" @click="prev">
            <UnoIcon class="i-carbon:chevron-left" />
          </div>
          <div class="custom-arrow custom-arrow--right" @click="next">
            <UnoIcon class="i-carbon:chevron-right" />
          </div>
        </div>
      </div>
      <!-- 合作单位 -->
      <div>
        <BasicTitle title="合作支持单位" title-en="Cooperative Partner" />
        <div class="flex mt-[20px] mb-[50px] flex-wrap">
          <div v-for="(i, index) in cooperationList" :key="index"
            class="_cooperate-item w-[150px] h-[60px] border border-[transparent] border-solid cursor-pointer hover:border-[#B3B3B3] mr-[25px] mb-[20px]"
            @click="openWindow(i.summary)">
            <img class="w-full h-full"
              :src="i.urlList?.[0]?.url || 'http://jmrh.dumi.info/upload/201609/01/201609011430559123.jpg'" alt="">
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped>
.banner-container {
  width: 100%;
  height: 600px;
  background: url("http://jmrh.dumi.info/upload/201608/30/201608300855387283.jpg") no-repeat center center;
  background-size: cover;
  border-bottom: 4px solid #c00;
}

.swiper-container {
  width: 710px;
  height: 473px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(100, 100, 100, .3);
}

::v-deep(.n-carousel.n-carousel--bottom .n-carousel__dots) {
  bottom: 54px;
  left: 100%;
  transform: translateX(-115%);
}

.carousel .custom-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 20px;
  color: #fff;
  background-color: #666;
  opacity: 0.6;
  border-width: 0;
  border-radius: 8px;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.carousel .custom-arrow:hover {
  opacity: 0.7;
}

.custom-arrow--left {
  position: absolute;
  top: 50%;
  left: -40px;
  transform: translateY(-50%);
}

.custom-arrow--right {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
}

._cooperate-item:nth-child(7n) {
  margin-right: 0;
}

::v-deep(.n-thing-main__description) {
  font-size: 13px;
  color: #999
}
</style>
